<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>支付宝-网上支付 安全支付</title>
  <link rel="stylesheet" href="./css/alipay.css">
</head>

<body>
  <div class="topbar">
    <div class="topbar-wrap">
      <a href="https://help.alipay.com/lab/help_detail.htm?help_id=258086">
        <span class="topbar-title">你好，欢迎使用支付宝付款！| 常见问题</span></a>
    </div>
  </div>
  <div class="container">
    <div class="header" style="margin-top: 15px;">
      <div class="alipay-log"></div>
    </div>
    <div id="content">
      <div id="order">
        <!-- 头部 -->
        <div class="orderDetail-base">
          <div class="order-explain">
            <span class="fn-left">
              <span>正在使用即时到账交易 [?]</span>
            </span>
          </div>
          <div class="commodity-message-row">
            <span class="long-content">小兔鲜儿</span>
            <span class="short-content">收款方 : 沙箱环境 </span>
          </div>
          <span class="payAmount-area">
            <span class="payAmount-font">136.00</span>
            元
          </span>
        </div>
      </div>
    </div>
    <div class="login-switchable-container">
      <div class="login-switchable-item">
        <!-- 账号登录模块 -->
        <div class="teLogin-right">
          <div class="teBox-in">
            <div class="login-title-area">
              <div class="login-title">
                <div class="login-title-left">
                  <p class="lt-text">登录支付宝账户付款</p>
                </div>
                <div class="login-title-right">
                  <a href="#">
                    <p class="rt-text">新用户注册</p>
                  </a>
                </div>
              </div>
            </div>
            <div class="teForm">
              <div class="login-panel">
                <div class="mi-from-item">
                  <div class="mi-label">
                    <div class="mi-label-lt">账户名：</div>
                    <a href="https://help.alipay.com/lab/help_detail.htm?help_id=216509">
                      <div class="mi-label-rt">忘记账户名？</div>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <input type="text" name="username" class="mi-input-account" placeholder="手机号码/邮箱">
            <!-- 校验账号 -->
            <span class="uname">请输入正确的手机号邮箱</span>
            <div class="mi-from-passworld">
              <div class="mi-label">
                <div class="mi-label-lt">支付密码：</div>
                <a href="https://self.alipay.com/selfhelp/passwordfind/index.htm?type=P">
                  <div class="mi-pw-rt">忘记密码？</div>
                </a>
              </div>
            </div>
            <input type="password" name="password" class="mi-input-account">
            <span class="password-pw">请输入正确的密码</span>
            <!-- 登录注意 -->
            <p class="mi-from-explain">请输入账户的<span class="mi-from-explain-text">支付密码</span> ，不是登录密码。</p>
            <!-- 下一步按钮 -->
            <div class="mi-from-btn">
              <button class="submit">下一步</button>
            </div>
          </div>
        </div>
        <div class="teLogin-left">
          <!-- 扫码模块 -->
          <div class="qrcode-area">
            <div class="qrcode-header">
              <div class="qrcode-title">扫码支付</div>
            </div>
            <img src="./images/下载.png" alt="">

            <div class="qrcode-foot">
              <div class="qrcode-explain">
                <div>使用手机支付宝扫码完成付款</div>
                <div class="qrcode-explain-end">手机支付宝下载 | 如何使用!</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="footer">
    <div>
      <a href="https://fun.alipay.com/certificate/jyxkz.htm">ICP证:沪B2-20150087</a>
    </div>
  </div>
  <div class="partner">
    <img src="./images/2R3cKfrKqS.png" alt="">
  </div>
</body>
<script>
  //校验账号
  // 获取账号表单
  const username = document.querySelector('[name=username]')
  // 使用change事件 值发生变化的时候 并且失去光标 
  username.addEventListener('change', verifyName)
  //  封装函数
  function verifyName() {
    const span = username.nextElementSibling
    const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
    if (!reg.test(username.value)) {
      span.style.display = 'block'
      return false
    }
    // 正确输入 清空span
    span.style.display = 'none'
    return true
  }

  // 校验密码
  const password = document.querySelector('[name=password]')
  // 使用change事件 值发生变化的时候
  password.addEventListener('change', verifypassword)
  //  封装函数
  function verifypassword() {
    const span = password.nextElementSibling
    const reg = /^[a-zA-Z0-9-_]{6,20}$/
    if (!reg.test(password.value)) {
      span.style.display = 'block'
      return false
    }

    // 正确输入 清空span
    span.style.display = 'none'
    return true
  }

  // 8. 提交的整体验证
  const submit = document.querySelector('.submit')
  submit.addEventListener('click', function (e) {
    // 依次判断上面每个文本框， 有一项不通过就无法提交
    if (!verifyName()) e.preventDefault()
    if (!verifypassword()) e.preventDefault()
  })

</script>

</html>